<template>
    <view class="container">
        <!-- 提示信息 -->
        <view class="greenPic">
            <view class="font" @click="login">注册</view>
            <view class="h4">账号密码登录</view>
        </view>

        <view class="white">
            <view id="account" style="margin-top: 30px;margin-left: 20px;">
                <view class="account">
                    <text style="margin-left: 1px;margin-top: 5px;">账号</text>
                    <input style="margin-left: 15px;" type="number" placeholder="请输入手机号码" v-model="account" />
                </view>
                <view class="line" style="margin-top: -10px;"></view>
                <view class="pass">
                    <text>密码</text>
                    <input style="margin-left: 15px;" type="password" placeholder="请输入密码" v-model="password" />
                </view>
                <view class="lineTwo" style="margin-top: -15px;"></view>

                <view id="xieyi" class="checkbox-container" style="margin-top: 25px;margin-left: 9px;">
                    <label>
                        <checkbox :checked="checkboxValue" @change="handleCheckboxChange"></checkbox>
                        <text>我已同意</text>
                        <text style="color: #00C8AA;">问诊协议</text>
                    </label>
                </view>
            </view>

            <view style="margin-top: 25px;" id="enter" @click="enter">
                <text>登录</text>
            </view>
        </view>

        <view class="threeEnter">第三方登录</view>
        <view class="enterImg">
            <image src="/static/wx.png" mode="" @click="wxLogin"></image>
        </view>

        <view class="all">
            @版权归大喇叭编程实训基地所有
        </view>
    </view>
</template>

<script setup>
import { ref } from "vue"; // 移除onMounted
import { wxLogins, login } from '/api/index.js';

const account = ref("");
const password = ref("");
const checkboxValue = ref(false);

const goRegister = () => {
  uni.reLaunch({ url: "/pages/register/register" });
};

const handleCheckboxChange = (e) => {
  checkboxValue.value = e.detail.value;
};

const wxLogin = async () => {
  try {
    uni.showLoading({ title: '登录中...', mask: true });
    
    // 1. 获取微信code
    const loginRes = await uni.login({ provider: 'weixin' });
    if (!loginRes.code) throw new Error('获取微信code失败');
    
    // 2. 获取openid和session_key
    const sessionRes = await wxLogins({
      code: loginRes.code,
      appid: 'wx3c0518fdc0f73347',
      secret: 'ecec3ad8ba75497227d4dbf316c6c336'
    });

    if (!sessionRes.data || !sessionRes.data.openid) {
      throw new Error('未获取到openid');
    }

    const { openid, session_key } = sessionRes.data;
    const localOpenid = uni.getStorageSync('openid');
    
    // 3. 比较openid
    if (localOpenid && localOpenid === openid) {
      // openid一致，直接跳转home
      uni.setStorageSync('sessionKey', session_key);
      uni.reLaunch({ url: '/pages/home/home' });
    } else {
      // openid不一致或不存在，跳转wx页面完善信息
      uni.setStorageSync('openid', openid);
      uni.setStorageSync('sessionKey', session_key);
      uni.reLaunch({ url: '/pages/wx/wx' });
    }
    
  } catch (error) {
    console.error('微信登录失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'none',
      duration: 3000
    });
  }
};

// 账号密码登录
const enter = async () => {
  try {
    uni.showLoading({ title: '登录中...' });
    
    const loginRes = await login({
      tel: account.value,
      pass: password.value
    });
    
    uni.hideLoading();
    
    if (loginRes.code === 1) {
      uni.showToast({ 
        title: '登录成功', 
        icon: 'success',
        success: () => {
          setTimeout(() => uni.reLaunch({ url: '/pages/home/home' }), 1500);
        }
      });
    } else {
      throw new Error(loginRes.message || '登录失败，请先注册');
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'none'
    });
  }
};
</script>

<style scoped>
.container {
    background-color: #ffffff;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-left: 5%;
}

.checkbox-container uni-checkbox {
    margin-right: 10px;
}

.checkbox-container text {
    font-size: 16px;
    color: #333;
}

.greenPic {
    background-color: #00c8aa;
    width: 100%;
    height: 13.625rem;
    position: relative;
}

.font {
    margin-left: 87%;
    font-size: 21px;
    padding-top: 12%;
    color: white;
    white-space: nowrap;
}

.h4 {
    text-align: center;
    font-size: 28px;
    color: white;
    white-space: nowrap;
}

.white {
    height: auto;
    width: 92%;
    margin-left: 4%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: -50px;
    position: absolute;
    z-index: 10;
    background-color: white;
}

.account {
    width: 90%;
    margin: 10px 5%;
    height: 45px;
    display: flex;
    align-items: center;
}

.pass {
    width: 90%;
    margin: 5% 5%;
    height: 45px;
    display: flex;
    align-items: center;
}

.line,
.lineTwo {
    width: 80%;
    height: 0.5px;
    background-color: #e5e5e5;
    margin-left: 5%;
}

#enter {
    width: 80%;
    height: 42px;
    line-height: 42px;
    border-radius: 20px;
    margin: 10px 10%;
    background-color: #00c8aa;
    text-align: center;
    margin-top: 62px;
}

#enter text {
    margin-left: -13px;
    position: absolute;
    color: white;
}

.threeEnter {
    margin-top: 93%;
    text-align: center;
    color: #adadad;
}

.enterImg {
    text-align: center;
    margin-top: 5%;
}

.enterImg image {
    width: 50px;
    height: 50px;
}

.all {
    position: absolute;
    margin-top: 5%;
    text-align: center;
    width: 100%;
    color: #adadad;
    font-size: 14px;
}
</style>